<template> 
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float:right"
          type="primary"
          @click="handleSearchList()"
          size="small">
          查询搜索
        </el-button>
        <el-button
          style="float:right;margin-right: 15px"
          @click="handleResetSearch()"
          size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="楼盘名称：">
            <el-input v-model="listQuery.loupanName" class="input-width" placeholder="楼盘名称"></el-input>
          </el-form-item>
          <el-form-item label="订单编号：">
            <el-input v-model="listQuery.orderNumber" class="input-width" placeholder="订单编号"></el-input>
          </el-form-item>
          <!-- <el-form-item label="反馈状态：">
            <el-input v-model="listQuery.feedbackStatus" class="input-width" placeholder="反馈情况"></el-input>
          </el-form-item> -->
          <el-form-item label="反馈状态：">
            <el-select
              v-model="listQuery.feedbackStatus"
              placeholder="全部"
              clearable
            >
              <el-option
                v-for="item in feedbackStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <!-- <el-button size="mini" class="btn-add" @click="handleAdd()">添加</el-button> -->
    </el-card>
    <div class="table-container">
      <el-table ref="couponTable"
                :data="list"
                style="width: 100%;"
                @selection-change="handleSelectionChange"
                v-loading="listLoading" border>
        <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
        <el-table-column label="订单编号" width="200" align="center">
          <template slot-scope="scope">{{scope.row.orderNumber}}</template>
        </el-table-column>
        <el-table-column label="楼盘名称" width="200" align="center">
          <template slot-scope="scope">{{scope.row.name}}</template>
        </el-table-column>
        <el-table-column label="素材类型" width="100" align="center">
          <template slot-scope="scope">{{scope.row.sucaiType}}</template>
        </el-table-column>
        <el-table-column label="素材类型" width="100" align="center">
          <template slot-scope="scope">  <el-button  
            size="mini"
            type="success"
            @click="showSucai(scope.$index,scope.row.sourceurl,scope.row.sucaiType)">
              查看素材
            </el-button></template>
        </el-table-column>
      
        <el-table-column label="订单状态" width="200" align="center">
          <template slot-scope="scope">{{scope.row.reviewstatus|formatStatus}}</template>
        </el-table-column>
        <el-table-column label="反馈状态" align="center">
          <template slot-scope="scope"><p>{{scope.row.feedbackUrl|feedbackStatus}} </p>
            <el-button size="mini"
          :type="scope.row.feedbackUrl?'success':'warning'"
            @click="feedback(scope.$index, scope.row)">{{scope.row.feedbackUrl|showfeedback}}</el-button>
</template>
        </el-table-column>
        <!-- <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button size="mini"
                       type="text"
                       @click="handleView(scope.$index, scope.row)">投放反馈</el-button>
   
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[5,10,15]"
        :total="total">
      </el-pagination>
    </div>
    <!-- 添加反馈弹窗 -->
    <el-dialog title="反馈现场效果" :visible.sync="dialogVisible1" width="40%">
      <el-form
        :model="uploadFeedbackUrl"
    
        label-width="150px"
        size="small"
      >
      <el-form-item label="反馈图片:" prop="url">
        <ImageUpload v-model="uploadFeedbackUrl.url" @change="getAvatarUrl"  :isbig="true"/>
      </el-form-item>
       
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false" size="small">取 消</el-button>
        <el-button type="primary" @click="adduploadFeedbackUrl()" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 展示反馈弹窗 -->
    <el-dialog title="展示现场效果图" :visible.sync="dialogVisible2" width="50%">
    <img class="showFeedbackUrl" :src="showFeedbackUrl" alt="投放效果展示图">
    </el-dialog>
    <!-- 展示素材弹窗 -->
    <el-dialog
    title="素材内容"
    :visible.sync="show"
    width="50%"
    :before-close="handleClose">
    <div class="sucai">
      <p>素材类型：{{sucaiType}}</p>
      <img :src="'http://'+showSucaiUrl" alt="素材图片" v-if="sucaiType==='图片'"/>
      <video  ref="sucaiVideo" v-else controls>
  
        <source :src="'http://'+showSucaiUrl" type="video/mp4">
        您的浏览器不支持video标签
      </source>
      </video>
  
    </div>
   
  </el-dialog>
  </div>
</template>
<script>
  import {fetchList,deleteCoupon} from '@/api/coupon';
  import {formatDate} from '@/utils/date';
import { getSourceYes,updateStatus, addFeedBackImg  } from "@/api/asource";
import ImageUpload from "@/components/image-upload";
import {getUpToken,uploadQNImage} from "@/api/auser"
import qiniu from "@/utils/qiniu";

  const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
    loupanName:'',
  orderNumber:'',
  feedbackStatus:'',//select
    name: null, 
    type: null
  };
  const defaultTypeOptions=[
    {
      label: '全场赠券',
      value: 0
    },
    {
      label: '会员赠券',
      value: 1
    },
    {
      label: '购物赠券',
      value: 2
    },
    {
      label: '注册赠券',
      value: 3
    }
  ];
  export default {
    name:'couponList',
    components: {
    ImageUpload
  },
    data() {
      return {
        dialogVisible1:false,
        dialogVisible2:false,
        listQuery:Object.assign({},defaultListQuery),
        typeOptions:Object.assign({},defaultTypeOptions),
        uploadFeedbackUrl:{},
        showFeedbackUrl:'',
        showSucaiUrl:'',//展示素材
      show:false,//展示素材弹窗

      sucaiType:'',
        list:null,
        total:null,
        listLoading:false,
        multipleSelection:[],
        feedbackStatus: [
        {
          value: 4,
          label: "已反馈",
        },
        {
          value: 1,
          label: "未反馈",
        },
      ],
      }
    },
    created(){
      this.getList();
    },
    filters:{
      //投放状态
      formatStatus(status){
if(status==='4'){
  return '已投放'
}else{
  return '已审核通过，等待投放'
}
      },
      // 反馈状态 同上一致
      feedbackStatus(url){
if(url){
  return '已反馈'
}else{
  return '未反馈'
}
      },
      showfeedback(url){
        if(url){
          return '查看反馈情况'
        }else{
        return '前往反馈'
        }
      },
      formatType(type){
        for(let i=0;i<defaultTypeOptions.length;i++){
          if(type===defaultTypeOptions[i].value){
            return defaultTypeOptions[i].label;
          }
        }
        return '';
      },
      formatUseType(useType){
        if(useType===0){
          return '全场通用';
        }else if(useType===1){
          return '指定分类';
        }else{
          return '指定商品';
        }
      },
      formatPlatform(platform){
        if(platform===1){
          return '移动平台';
        }else if(platform===2){
          return 'PC平台';
        }else{
          return '全平台';
        }
      },
      formatDate(time){
        if(time==null||time===''){
          return 'N/A';
        }
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd')
      },
      // formatStatus(endTime){
      //   let now = new Date().getTime();
      //   let endDate = new Date(endTime);
      //   if(endDate>now){
      //     return '未过期'
      //   }else{
      //     return '已过期';
      //   }
      // }
    },
    methods:{
      handleResetSearch() {
        this.listQuery = Object.assign({}, defaultListQuery);
      },
      handleSearchList() {
        this.listQuery.pageNum = 1;
        console.log( this.listQuery);
        this.getList();
      },
      handleSelectionChange(val){
        this.multipleSelection = val;
      },
      handleSizeChange(val) {
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.pageNum = val;
        this.getList();
      },
        //关闭展示素材内容弹窗
    handleClose(done) {
      this.showSucaiUrl=''
      const video=this.$refs.sucaiVideo
      if(video&&!video.paused){
        video.pause()
      }
      done();
      },
      showSucai(index,url,type){
        console.log(index,url);
this.show=true
this.showSucaiUrl=url
this.sucaiType=type
      },
      // 查看反馈或反馈操作
      feedback(index,info){
        console.log(index,info);
        this.showFeedbackUrl=''
        this.uploadFeedbackUrl={}
        if(info.feedbackUrl){
          this.dialogVisible2=true
          this.showFeedbackUrl=info.feedbackUrl
        }else{
          this.dialogVisible1=true//添加
          this.uploadFeedbackUrl.id=info.id
        }
      },
      // 添加反馈
      adduploadFeedbackUrl(info){
        // 获取素材id url
console.log('添加反馈',this.uploadFeedbackUrl);
if(this.uploadFeedbackUrl.url!==''){
// 接口上传
console.log('接口参数',this.uploadFeedbackUrl);
addFeedBackImg(this.uploadFeedbackUrl).then(res=>{
if(res.isSuccee){
  this.$message({
  type:'success',
  message:'上传投放现场反馈效果图成功！'
})
this.dialogVisible1=false
this.getList()
}
})
console.log(this.uploadFeedbackUrl);
}else{
this.$message({
  type:'warning',
  message:'请上传反馈图片！'
})
}

      },
      // 上传图片
      getAvatarUrl(file) {
      console.log("图片上传", file);

      if (file) {
        getUpToken()
          .then(res => {
            return uploadQNImage({
              token: res.uptoken,
              file: file.raw
            });
          })
          .then(res => {
            if (res.key) {
              this.$set(
                this.uploadFeedbackUrl,
                "url",
                `${qiniu.domain}${res.key}`
              );
            }
          });
      }
    },
      getList(){
        this.listLoading=true;
        getSourceYes(this.listQuery).then(response=>{
          this.listLoading = false;
          this.list = response.data.list;
          this.total = response.data.total;
        });
      }
    }
  }
</script>
<style scoped>
  .input-width {
    width: 203px;
  }
  .showFeedbackUrl{
    width: 100%;
    height: 100%;
  }
  .sucai img,.sucai video{
    width: 100%;
    height: 100%;
    }

</style>


